<template>
  <div class="nav">
    <div class="nav_logo">
      <img src="../assets/logo.png"/>
    </div>
     <div class="nav_list">
       <ul tabindex="1">
        <li><a href="javascript:;" v-bind:class="activeClass == 1 ? 'nav_list_cover':''" @click="route_web('FindDev',$event,1)">设备管理</a></li>
        <li><a href="javascript:;" v-bind:class="activeClass == 2 ? 'nav_list_cover':''" @click="route_web('UserList',$event,2)">用户管理</a></li>
        <li><a href="javascript:;" v-bind:class="activeClass == 3 ? 'nav_list_cover':''" @click="route_web('UpGrade',$event,3)">固件管理</a></li>
        <li><a href="javascript:;" v-bind:class="activeClass == 4 ? 'nav_list_cover':''" @click="route_web('Health',$event,4)">健康报告</a></li>
        <li><a href="javascript:;" v-bind:class="activeClass == 5 ? 'nav_list_cover':''" @click="route_web('Power',$event,5)">功耗报告</a></li>
        <li><a href="javascript:;" v-bind:class="activeClass == 6 ? 'nav_list_cover':''" @click="route_web('Parameter',$event,6)">参数管理</a></li>
        <li><a href="javascript:;" v-bind:class="activeClass == 7 ? 'nav_list_cover':''" @click="route_web('LogList',$event,7)">日志管理</a></li>
	</ul>
  </div>
     <div class="nav_foot">
       <p><span>深开鸿</span></p>
       <p><span>2022-3</span></p>
     </div>
  </div>
</template>

<script setup="props, context">
/* <script setup="props, { attrs, slots, emit }" lang="ts"> */
//import router from '@/route/index'
//import { useRouter } from 'vue-router'
//const router = useRouter()
import VueEvent from '../utils/event';
import {ref} from 'vue';
//const emits = defineEmits(["FatherClick"]);

// console.log(props.msg)
// console.log(context.attrs.msg)
var activeClass=ref(1);

const route_web=(web_name,event,index)=>{
  //context.emits("FatherClick",'web_name');
  //emits("FatherClick",web_name);
  var el = event.currentTarget;
  VueEvent.emit("tomsg",{web_name});
  activeClass.value=index;
  console.log(activeClass.value);
}
</script>

<style>
.nav {
   display: block;
   left: 0;
   height: calc(100vh);
   width: 200px;
   background-color: #605144;
   box-shadow: 2px 8px 10px #888888;
}

.nav_foot{
  bottom: 0px;
  color:#d0c1b1;
  display: flex;
  justify-content: center;
  align-items:flex-end;
}

.nav_logo{
  position: relative;
  width: 100%;
  padding: 50px 0px 50px 8px;
}

.nav_list{
  height:calc(100vh - 200px);
}

.nav_list li{
  height: 60px;
  
}

.nav_list li a{
  display: block;
  color:#d0c1b1;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 60px;
  font-size: 18px;
  font-weight: 500;
}

.nav_list_cover{
  color: #605144!important;
  background-color: #d0c1b1;
  box-shadow: 2px 3px 5px #888888;
}

</style>